import React, { Component } from "react";
import { Form, Input, DatePicker, Modal, Button, Upload } from "antd";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

const { RangePicker } = DatePicker;
const { TextArea } = Input;

class EditForm extends Component {
    render() {
        const { visible, onCancel, onOk, form, confirmLoading, currentRowData } = this.props;
        // console.log(currentRowData);
        const { getFieldDecorator, setFieldsValue } = form;
        const {
            activityId,
            activityTime,
            activitySpot,
            activityImg,
            activityContent,
            fullTitle,
            shortTitle,
        } = currentRowData;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 16 },
            },
        };

        // const disabledDate = current => current && current > moment().endOf('day') || current < moment().subtract(6, 'months');
        const defaultSelectDate = {
            startDate: moment(activityTime.split("至")[0] || "YYYY年MM月DD日", "YYYY年MM月DD日"),
            endDate: moment(
                activityTime.split("至")[1] || activityTime.split("至")[0] || "YYYY年MM月DD日",
                "YYYY年MM月DD日"
            ),
        };
        return (
            <Modal
                title="编辑"
                visible={visible}
                onCancel={onCancel}
                onOk={onOk}
                confirmLoading={confirmLoading}
            >
                <Form {...formItemLayout}>
                    <Form.Item label="活动id:"
                        disabled={true}
                    >
                        {getFieldDecorator("activityId", {
                            initialValue: activityId,
                            rules: [{ required: true }],
                        })(<Input />)}
                    </Form.Item>
                    <Form.Item label="活动全称:">
                        {getFieldDecorator("fullTitle", {
                            initialValue: fullTitle,
                            rules: [{ required: true }],
                        })(<Input placeholder="全称" />)}
                    </Form.Item>
                    <Form.Item label="活动简称:">
                        {getFieldDecorator("shortTitle", {
                            initialValue: shortTitle,
                            rules: [{ required: true }],
                        })(<Input placeholder="简称" />)}
                    </Form.Item>
                    <Form.Item label="活动时间:">
                        {getFieldDecorator("activityTime", {
                            rules: [{ required: true, message: "请选择时间!" }],
                            initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate],
                        })(
                            <RangePicker
                                showTime
                                disabledDate={this.disabledDate}
                                format="YYYY年MM月DD日"
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="活动地点:">
                        {getFieldDecorator("activitySpot", {
                            initialValue: activitySpot,
                            rules: [{ required: true }],
                        })(<Input />)}
                    </Form.Item>
                    <Form.Item label="活动图片:">
                        {getFieldDecorator("activityImg", {
                            initialValue: activityImg,
                            rules: [{ required: false }],
                        })(<Input disabled={true} />)}
                        <Upload
                            action="https://api.hiehie.top:6001/upload/" //此处被编辑----------------------------------------------------------
                            listType="picture"
                            maxCount={1}
                            accept="image/gif,image/png,image/jpg,image/jpeg,image/svg,image/webp"
                            showUploadList={false}
                            method="post"
                            onChange={(f) => {
                                console.log(f);
                                if (f.file.status === "done") {
                                    setFieldsValue({
                                        activityImg: f.file.response,
                                    });
                                }
                            }}
                            name="image"
                        >
                            <Button>上传图片</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="活动内容:">
                        {getFieldDecorator("activityContent", {
                            initialValue: activityContent,
                            rules: [{ required: true }],
                        })(<TextArea rows={4} placeholder="请输入活动内容" />)}
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

export default Form.create({ name: "EditForm" })(EditForm);
